<template>
  <div class="con">
    <div>
      <span>我的订单</span>
      <div class="point_box">
        <van-icon name="weapp-nav" class="point" />
        <span class="icon_line">|</span>
        <van-icon name="stop-circle" class="point_circle" />
      </div>
    </div>
    <div class="tab_list">
      <van-tabs v-model:active="active" @change="handleTabChange">
        <van-tab v-for="(item, i) in tabs" :key="i" :title="item">
          <template
            v-if="
              i === 0 ||
              item === '未支付' ||
              item === '已完成' ||
              item === '进行中' ||
              item === '待服务'
            "
          >
            <div v-for="order in orders" :key="order.id" class="order_box">
              <van-card
                :price="`价格：${order.price}`"
                :title="`服务项目：${order.service_item}`"
                :thumb="`${order.data_upload}`"
              >
                <template #tags>
                  <p v-if="showDetails[order.id]" class="slot">
                    医院：{{ order.hospital }}
                  </p>
                  <p v-if="showDetails[order.id]" class="slot">
                    陪诊人：{{ order.escort }}
                  </p>
                  <p v-if="showDetails[order.id]" class="slot">
                    患者：{{ order.patient }}
                  </p>
                  <van-tag plain type="primary" class="slot"
                    >预计时间：{{ order.expect_time }}</van-tag
                  >
                </template>
                <template #footer>
                  <van-button
                    @click="toggleDetails(order.id)"
                    size="mini"
                    class="slot"
                    >详情</van-button
                  >
                  <van-button
                    @click="showDetails[order.id] = false"
                    size="mini"
                    type="danger"
                    class="slot"
                    >{{ order.status }}</van-button
                  >
                  <van-button
                    v-if="order.status === '已完成'"
                    @click="evaluateOrder(order)"
                    size="mini"
                    type="primary"
                    class="slot"
                    >评价</van-button
                  >
                </template>
              </van-card>
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </div>
  </div>
  <div>
  <tabbar></tabbar>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import http from "@/http";
const router = useRouter();
import tabbar from "@/components/tabbar.vue";
let active = ref(0);
let tabs = ref(["全部", "未支付", "待服务", "进行中", "已完成"]);
const orders = ref([]);
const showDetails = reactive({});

function handleTabChange(event) {
  const index = event;
  const item = tabs.value[index];
  console.log(item);
  queryOrdersByStatus(item);
}
// 添加已完成订单的评价点击事件
function evaluateOrder(order) {
  console.log("陪诊师", order.escort);
  router.push({
    path: "/evaluateorder",
    query: {
      escort: order.escort,
    },
  });
}
function queryOrdersByStatus(status) {
  const requestData = {
    status: status,
  };
  let requestUrl = "/patient/unpaidorders/";
  if (status === "全部") {
    requestData["get_all"] = true;
  }
  http
    .post(requestUrl, requestData)
    .then((response) => {
      console.log("查询订单成功", response.data.order_info);
      orders.value = response.data.order_info;
      orders.value.forEach((order) => {
        showDetails[order.id] = false;
      });
    })
    .catch((error) => {
      console.log("查询订单失败", error);
    });
}

function toggleDetails(orderId) {
  showDetails[orderId] = !showDetails[orderId];
}

onMounted(() => {
  if (active.value === 0) {
    queryOrdersByStatus("全部");
  }
});

</script>
<style scoped>
.con {
  text-align: center;
  margin-top: 5%;
  height: 100%;
}

.point_box {
  position: absolute;
  top: 2%;
  right: 8%;
  width: 25%;
  height: 4%;
  border: 1px solid rgb(232, 229, 229);
  border-radius: 20px;
  background-color: white;
}

.point {
  position: absolute;
  right: 70%;
  top: 15%;
  font-size: 20px;
  color: rgb(139, 139, 139);
}

.icon_line {
  position: absolute;
  right: 50%;
  top: 10%;
  font-size: 20px;
  color: rgba(165, 159, 159, 0.336);
}

.point_circle {
  position: absolute;
  right: 16%;
  top: 15%;
  font-size: 20px;
  color: rgb(140, 138, 138);
}

.tab_list {
  margin: 5% 0 15%;
}

.slot {
  margin: 5px 0;
}

.order_box {
  border: 1px solid rgb(214, 212, 212);
}

</style>